import React, {Component} from 'react';
import { DatePicker, Form, Row, Col, Input, Button, Icon, Cascader, Select, Checkbox } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const { RangePicker } = DatePicker;

// 必传参数
// 1. searchKeys [], 
// 2. onSearchCb 控制搜索成功之后的cb


//搜索表单组件
class SearchForm extends React.Component {

    state = {

    };
  
    handleSearch = (e) => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
           this.props.onSearchCb(values);
      });
    }
  
    handleReset = () => {
      this.props.form.resetFields();
    }
  
    // To generate mock Form.Item
    getFields() {
        const { getFieldDecorator } = this.props.form;
        const children = [];
        this.props.searchKeys.forEach((val, index)=> {
            if(val.type == 1) {
                children.push(
                    <Col sm={13} md={8} key={val.id} >
                      <FormItem className="label-control-wx" label={`${val.name}`}>
                        {getFieldDecorator(`${val.id}`)(
                          <Input placeholder="输入" />
                        )}
                      </FormItem>
                    </Col>
                  );
            }
            if(val.type == 2) {
                children.push(
                    <Col sm={13} md={8} key={val.id} >
                      <FormItem className="label-control-wx" label={`${val.name}`}>
                        {getFieldDecorator(`${val.id}`)(
                            <Select>
                                {val.options.map(val => {
                                    return <Option key={val.val} value={val.val}>{val.text}</Option>
                                })}
                            </Select>
                        )}
                      </FormItem>
                    </Col>
                  );
            }
            if(val.type == 3) {
                children.push(
                    <Col span={12} key={val.id} >
                      <FormItem className="label-control-wx" label={`${val.name}`}>
                        {getFieldDecorator(`${val.id}`)(
                            <RangePicker />
                        )}
                      </FormItem>
                    </Col>
                  );
            }
            //这里还要写city两个对应的城市select
        })
      return children;
    }
  
    render() {
      return (
        <Form
          className="ant-advanced-search-form"
          onSubmit={this.handleSearch}
          layout='inline'
        >
          <Row gutter={24}>{this.getFields()}</Row>
          <Row>
            <Col span={8} push={16} style={{ textAlign: 'left',paddingLeft : '90px' }}>
                <Button className='serach-empty-btn' onClick={this.handleReset}>
                    清空
                </Button>
                <Button className='search-btn' type="primary" htmlType="submit">搜索</Button>
            </Col>
          </Row>
        </Form>
      );
    }
  }
  
const WrappedSearchForm = Form.create()(SearchForm);
export default WrappedSearchForm